<template>
  <view class="container">
    <!-- 展览列表 -->
    <view v-for="(item, index) in exhibitionList" :key="index" class="exhibition-card">
      <!-- 图片区域（需要替换实际图片路径） -->
      <image 
        class="exhibition-image" 
        :src="item.image" 
        mode="aspectFill"
      />
      <view class="content-wrapper">
        <!-- 标题和日期 -->
        <view class="header">
          <text class="title">{{ item.title }}</text>
          <text class="date">{{ formatDate(item.date) }}</text>
        </view>
        <!-- 展览描述 -->
        <text class="description">{{ item.description }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      exhibitionList: [
        {
          title: "远古生命传奇-琥珀展",
          description: "琥珀陈郁温润，光彩斑斓。岁月流金底色映印远古生命传奇，由此我们窥探古老生物多样性、演化进程和古生态谱...",
          date: "2022-03-23",
          image: "/static/exhibitions/amber.jpg" // 假设图片路径
        },
        {
          title: "大明宫瓷——十五世纪的明...",
          description: "明朝取代蒙元立国后，致力于'复先王之旧'，参议唐与两宋制度，复兴华夏礼乐衣冠，但祭礼皆用瓷器...",
          date: "2022-03-23",
          image: "/static/exhibitions/porcelain.jpg"
        },
        {
          title: "丝路搬珍-铜胎掐丝法琅艺术展",
          description: "泱泱五千年中华文明创造了无数艺术瑰宝，景泰蓝尤为夺目。虽仅有六百余年历史，但景泰蓝却因集美术、工艺...",
          date: "2022-03-23",
          image: "/static/exhibitions/cloisonne.jpg"
        },
        {
          title: "交流互鉴——敦煌石窟与河...",
          description: "丝绸之路是古代联通东西方文明的大通道，也是东西方政治、经济与文化艺术往来交流的纽带。敦煌是陆上丝绸之...",
          date: "2022-03-23",
          image: "/static/exhibitions/dunhuang.jpg"
        }
      ]
    };
  },
  methods: {
    formatDate(dateString) {
      // 简单日期格式化示例
      return dateString.replace(/-/g, ".");
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.exhibition-card {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.exhibition-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx 12rpx 0 0;
}

.content-wrapper {
  padding: 24rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
}

.date {
  font-size: 24rpx;
  color: #999;
}

.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>